import { CloseOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { Options, Vue } from 'vue-class-component';
import './setting-drawer.less';
@Options({
    components: {
        'setting-out-lined': SettingOutlined,
        'close-out-lined': CloseOutlined,
    },
})
export class SettingDrawer extends Vue {
    /**
     * 显示状态
     *
     * @type {boolean}
     * @memberof SettingDrawer
     */
    visible: boolean = false;

    /**
     * 飘窗关闭事件
     *
     * @memberof SettingDrawer
     */
    onClose() {
        this.visible = false;
    }

    /**
     * 绘制函数
     *
     * @return {*}
     * @memberof SettingDrawer
     */
    render() {
        return (
            <div class='setting-drawer'>
                <div
                    class={{ handle: true, open: this.visible }}
                    onClick={() => {
                        this.visible = !this.visible;
                    }}
                >
                    {this.visible ? <close-out-lined /> : <setting-out-lined />}
                </div>
                <a-drawer
                    mask={false}
                    onClose={this.onClose}
                    visible={this.visible}
                    class={['custom-class']}
                    style={{ color: 'red' }}
                    title='Basic Drawer'
                    width={300}
                    placement='right'
                    getContainer={() => this.$el}
                >
                    <div>抽屉内容</div>
                </a-drawer>
            </div>
        );
    }
}
